<template>
  <div class="createPost-container">
    <el-row
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="app-container">
      <el-row class="row">
        <el-input v-model="article.title" placeholder="请输入文章标题"></el-input>
      </el-row>

      <el-row class="row">
        <tinymce v-model="article.connect" :height="300" />
      </el-row>

      <el-row class="row">
        <el-button  type="primary" @click="createArticle">默认按钮</el-button>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { createArticle, updateArticle } from '@/api/article'
import Tinymce from '@/components/Tinymce'

export default {
  name: 'ArticleDetail',
  // eslint-disable-next-line vue/no-unused-components
  components: { Tinymce },
  props: {
    article: {
      id: '',
      title: '',
      connect: ''
    }
  },
  data() {
    return {
      loading: false
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    async createArticle() {
      // const that = this
      if (this.article.title.length <= 0) {
        console.log(this.article)
        return
      }

      console.log(this.article)
      this.loading = true
      if (this.article.id > 0) {
        await updateArticle(this.article)
      } else {
        await createArticle(this.article)
      }
      this.loading = false

      this.$confirm('文章' + (this.article.id > 0 ? '更新' : '添加') + '成功, 是否继续添加?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        this.article.id = ''
        this.article.title = ''
        this.article.connect = ''
      }).catch(() => {
        this.$router.push('/article/index')
      })
    }
  }
}
</script>
<style scoped>
.row {
  margin-bottom: 15px !important;
}
</style>
